<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>在线留言</title>
		<style type="text/css">
			li{
				background-color: pink;
				color: red;
			}
			textarea{
				height: 100px;
				width: 430px;
				background: transparent;
				border: solid 1px;
				margin-left: 400px;
			}
			body{
				font-size: 25px;
			}
		</style>
	</head>
	<body>
		<textarea rows="" cols="">
			
		</textarea>
		<button type="button">发布</button>
		<ul>
			<li>我宿舍那个肥宅，整天躺床上，我早就想把他抬入棺了。</li>
			<li>要不是我室友都是废物我怎么可能会是废物？</li>
			<li>等我有钱了我一定要请他们到医院坐坐。。。</li>
			<li>兄弟们来赞助我买根最新限量版狼牙棒，到时在线给你们直播如何教育室友！</li>
		</ul>
		<script type="text/javascript">
			var btn=document.querySelector('button');
			var ul=document.querySelector('ul');
			var texts=document.querySelector('textarea');
			btn.onclick=function(){
				if(texts.value==''){
					alert('您没有输入内容！');
					return false;
				}
				else{
					var li=document.createElement('li');
					li.innerHTML=texts.value;
					ul.insertBefore(li,ul.children[0]);
				}
				
			}
		</script>
	</body>
</html>
